<div class="info-container clearfix">
  <div class="rent-record mt_20 fl">
    <p class="font_24 text-grey pt_30 pl_30">租房记录</p>
    <div class="pie_chart clearfix">
      <div class="pie fl">
        <div class="pie-inner">
          <div class="pie-info">
            <div class="inner-shadow">
              <p class="font_18">还剩</p>
              <p class="font_36 rent-price">{{currentContract.remainingDays}}</p>
              <p class="font_18">天</p>
            </div>
          </div>
        </div>
      </div>
      <div class="info fr">
        <p>
          <span class="font_14">房间号</span>
          <span class="font13">{{currentContract.houseNo}}</span>
        </p>
        <p>
          <span class="font_14">起租日期</span>
          <span class="font13">{{currentContract.leaseStart}}</span>
        </p>
        <p>
          <span class="font_14">结束日期</span>
          <span class="font13">{{currentContract.leaseEnd}}</span>
        </p>
        <div class="btn-group">
          <div class="wf-animation-button
                      text-grey
                      hvr-bounce-bg-to-right
                      main-theme-bg
                      check-button" (click)="gotoContract(currentContract.contractPdf)">查看合同</div>
          <!--<div class="wf-animation-button-->
                      <!--text-grey-->
                      <!--hvr-bounce-bg-to-right-->
                      <!--main-theme-bg-->
                      <!--change-button"-->
               <!--*ngIf="currentContract.status==1">完成签约</div>-->
          <!--<div class="wf-animation-button-->
                      <!--text-grey-->
                      <!--hvr-bounce-bg-to-right-->
                      <!--main-theme-bg-->
                      <!--change-button"-->
               <!--*ngIf="currentContract.status==2">完成付款</div>-->
          <div class="wf-animation-button
                      text-grey
                      hvr-bounce-bg-to-right
                      main-theme-bg
                      change-button"

               (click)="showExchangeModal()">申请换房</div>
          <div class="wf-animation-button
                      text-grey
                      hvr-bounce-bg-to-right
                      main-theme-bg
                      checkout-button"
               (click)="showCheckoutModal()">申请退房</div>
        </div>

      </div>
    </div>
    <div class="paddingrl_10">
      <ul class="th clearfix">
        <li>订单号</li>
        <li>房间号</li>
        <li>月租</li>
        <!--<li>押金</li>-->
        <li>状态</li>
      </ul>
      <ul *ngFor="let item of contractList;let i=index"
          (mouseover)="mouseOver(item)"
          [ngClass]="{'hover-style': item.hover}"
          (click)="pickContract(item)"
          (mouseleave)="mouseLeave(item)">
        <li>{{item.uuid}}</li>
        <li>{{item.houseNo}}</li>
        <li>￥{{item.rental}}</li>
        <!--<li>￥{{item.deposit}}</li>-->
        <li [ngStyle]="fontStyle(item)">{{item.statusName}}</li>
      </ul>
      <div class="noinfo" *ngIf="contractList.length==0">
        -------------暂无信息-------------
      </div>
    </div>
  </div>
  <div class="payment-record mt_20 fr">
    <p class="font_24 text-grey pt_30 pl_30">交租记录</p>
    <!--<div class="wf-animation-button text-grey hvr-bounce-bg-to-right main-theme-bg pay-button">交房租</div>-->
    <div class="paddingrl_10 mt_20 recode">
      <ul class="th clearfix">
        <!--<li>选择</li>-->
        <li>日期</li>
        <li>金额</li>
        <li>状态</li>
      </ul>
      <ul *ngFor="let item of billList;let i=index"
          (mouseover)="mouseOver(item)"
          (mouseleave)="mouseLeave(item)">
        <!--<li><input type="radio" name="pay"></li>-->
        <li>{{item.startTime}}</li>
        <li>￥{{item.money}}</li>
        <li [ngStyle]="(getStatus(item)).style" (click)="payRent(item)">{{getStatus(item).name}}</li>
      </ul>
      <div class="noinfo" *ngIf="billList.length==0">
        -------------暂无信息-------------
      </div>
    </div>
  </div>
</div>
<app-exchange-modal-view
  [apartmentName]="apartmentName"
  [contractId]="contractId"
  (modalClose)="closeExchangeModal($event)"></app-exchange-modal-view>
<app-checkout-modal-view
  [contractId]="contractId"
  (modalClose)="closeCheckoutModal($event)"></app-checkout-modal-view>
